.#{$ns}Number {
    margin: 0;
    padding: 0;
    line-height: $Form-input-height;
    font-size: $Form-input-fontSize;
    height: $Form-input-height;
    display: inline-block;
    vertical-align: middle;
    background-color: $Number-bg;
    border: $Number-borderWidth solid $Number-borderColor;
    border-radius: $Number-borderRadius;

    &-focused {
        border-color: $Form-input-onFocused-borderColor;
        box-shadow: $Form-input-boxShadow;
    }

    &-handler {
        text-align: center;
        overflow: hidden;
        display: block;
        touch-action: none;

        &-active {
            background: #ddd;
        }
    }

    &-handler-up-inner,
    &-handler-down-inner {
        user-select: none;
        -webkit-user-select: none;
    }

    &:hover {
        border-color: $Form-input-onFocused-borderColor;

        .#{$ns}Number-handler-up,
        .#{$ns}Number-handler-wrap {
            border-color: $Form-input-onFocused-borderColor;
        }
    }

    &-disabled:hover {
        border-color: $Form-input-borderColor;

        .#{$ns}Number-handler-up,
        .#{$ns}Number-handler-wrap {
            border-color: $Form-input-borderColor;
        }
    }

    &-input-wrap {
        overflow: hidden;
        height: 100%;
    }

    &-input {
        width: 100%;
        background-color: transparent;
        text-align: left;
        vertical-align: top;
        outline: 0;
        -moz-appearance: textfield;
        line-height: $Form-input-height - $Number-borderWidth * 2;
        height: 100%;
        transition: all 0.3s ease;
        border: 0;
        border-radius: $Form-input-borderRadius;
        padding: 0 $Form-input-paddingX;
    }

    &-handler {
        background-color: $Number-handler-bg;
        color: $Number-handler-color;
        font-family: $Number-handler-fontFamily;
        font-size: $Number-handler-fontSize;

        &:hover {
            background-color: $Number-handler-onHover-bg;
        }

        &:hover:active {
            background-color: $Number-handler-onActive-bg;
        }
    }

    &-handler-up {
        &-inner {
            &:after {
                content: $Number-handler--up-content;
            }
        }
    }

    &-handler-down {
        &-inner {
            &:after {
                content: $Number-handler--down-content;
            }
        }
    }

    @if $Number-handler-mode==vertical {
        &-handler-wrap {
            float: right;
            border-left: px2rem(1px) solid $Form-input-borderColor;
            width: $Number-handler-width;
            height: 100%;
        }

        &-handler {
            line-height: ($Form-input-height - px2rem(6px)) / 2;
            height: ($Form-input-height - $Number-borderWidth * 2) / 2;
        }

        &-handler-up {
            border-bottom: px2rem(1px) solid $Form-input-borderColor;
            padding-top: px2rem(1px);
        }
    } @else {
        position: relative;

        &-input {
            text-align: center;
        }

        &-handler-up,
        &-handler-down {
            position: absolute;
            width: $Number-handler-width;
            height: 100%;
            top: 0;
        }

        &-handler-down {
            left: 0;
        }

        &-handler-up {
            right: 0;
        }
    }

    &-handler-down-disabled,
    &-handler-up-disabled {
        background-color: $Number-handler-onDisabled-bg;
        pointer-events: none;
        color: $Number-handler-onDisabled-color;
    }

    &-disabled {
        .#{$ns}Number-input {
            opacity: 0.72;
            cursor: not-allowed;
            background-color: $gray200;
        }

        .#{$ns}Number-handler {
            opacity: 0.72;

            &:hover {
                color: $text--muted-color;
                border-color: $Form-input-borderColor;
            }
        }
    }
}

.#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
    display: block;
}
